<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>



<div style="height: 100vh;background-color: #666">
	<!-- 框架的组件文档 "https://zijieke.com/semantic-ui/collections/breadcrumb.php" -->
	<div class="ui breadcrumb" style="background-color: #fff;width: 100%;margin: 0;height: 5vh;line-height: 5vh">
		<a class="section">主页</a>
		<i class="right angle icon divider"></i>
		<a class="section">商店</a>
		<i class="right angle icon divider"></i>
		<a class="section active">T恤</a>
		
	</div>
</div>

<script type="text/javascript">
	//获取navitem项
	var navitem=$('.breadcrumb a');
	//为item执行点击事件
	navitem.click(function(){
		console.log($(this).index());
		//利用addClass()、removeClass()来控制当前点击项的样式。
		//siblings()可获取当前点击项的其他兄弟元素
		$(this).addClass('active')
		$(this).siblings().removeClass('active');
	});
</script>